<template>

    <div>
        <el-row>
            <el-col :span='12'>
                <div class="title">
                    <span style='color:#ffffff;'>普联东文官网后台管理系统</span>
                </div>
            </el-col>
            <el-col :span='12' style="text-align:right; padding-right:60px;">
                <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link user">
                        <img class="user-logo" src="../../assets/img/user.jpg"/>
                        <span class="user-logo-name">{{username}}</span>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="changPassword">修改密码</el-dropdown-item>
                        <el-dropdown-item command="loginout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>

         <!--修改密码框-->
        <el-dialog title="修改密码" :visible.sync="dialogVisible" width='25%'>
            <el-form :model="form" label-position='right' label-width='80px' size='small' ref='form' :rules="rules">
                <el-form-item label="旧密码" prop="oldPass">
                    <el-input type="password" v-model="form.oldPass" placeholder="输入旧密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPass">
                    <el-input type="password" v-model="form.newPass" placeholder="输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="rePass">
                    <el-input type="password" v-model="form.rePass" placeholder="输入确认密码"></el-input>
                </el-form-item>
            </el-form>
            <div slot='footer'>
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="changePass">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {

    data(){

        let validateOldPass = (rules,value,callback) => {
            if(value==''){
                callback(new Error('请输入旧密码'));
            }else if(value.length<6){
                callback(new Error('密码最少6位数'));
            }else{
               callback()
            }
        };
        let validateNewPass = (rules,value,callback) => {
            if(value==''){
                callback(new Error('请输入新密码'));
            }else if(value.length<6){
                callback(new Error('密码最少6位数'));
            }else{
                if(this.form.rePass!=''){
                    this.$refs.form.validateField('rePass')
                }
                callback()
            }
        }
        let validateRepass = (rules,value,callback) => {
            if(value==''){
                callback(new Error('请输入新密码'));
            }else if(value != this.form.newPass){
                callback(new Error('两次输入密码不一致'));
            }else {
                callback()
            }
        }

        return {
            username: '一个很长的名字',
            dialogVisible: false,
            form: {
                oldPass: '',
                newPass: '',
                rePass: '',
            },
            rules: {
                oldPass: [{validator: validateOldPass, trigger: 'blur'}],
                newPass: [{validator: validateNewPass, trigger: 'blur'}],
                rePass: [{validator: validateRepass, trigger: 'blur'}],
            },
        }
    },
    methods: {
        handleCommand(command){
            if(command=='loginout'){
                //退出系统,清除本地缓存
                sessionStorage.removeItem('token')
                sessionStorage.removeItem('username')
                this.$router.push('/login');
            }else if(command='changPassword'){
                this.dialogVisible = true
                this.form.oldPass = ''
                this.form.newPass = ''
                this.form.rePass = ''
            }
        },

        changePass(){
            this.$refs.form.validate(valid=>{
                if(valid){
                    let p = {};
                    let url = '/api/member/changePass';
                    p.username = this.username;
                    p.oldPass = this.form.oldPass;
                    p.newPass = this.form.newPass;       
                    this.$http.fetch(url, p)
                    .then(res=>{
                        this.dialogVisible = false
                        this.$message({
                            showClose: true,
                            message: res.msg,
                            type: 'success'
                        })
                    })
                    .catch(err=>{

                    })
                }
            });
        }
    },
    mounted(){
        this.username = sessionStorage.getItem("username")
    }
    
}
</script>

<style scoped>
.title {
    font-size: 24px;
    font-weight: 600;
    line-height: 40px;
    margin-left: 100px;
    font-family: "Microsoft YaHei";
    letter-spacing: 2px;
    margin-top: 10px;
}

.user{
    cursor:pointer;
        display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}


.user-logo-name{
    font-size: 20px;
    margin-top:10px;
    margin-left: 6px;
}

.user-logo{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-top: 10px;
}
</style>